<template>
  <div class="correctGuide">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">修改指引</div>
      </div>
      <div class="fr">
        <el-button size="small" plain @click="$router.go(-1)">返回</el-button>
      </div>
    </div>
    <div class="upload">
      <el-upload
        class="upload-demo"
        drag
        action="/api/guide/upload"
        :on-success="updata"
        :on-remove="removeFileList"
        :file-list="files"
        multiple>
        <div class="user-defined">
          <div class="fujian">
            <i class="iconfont icon-fujian"></i>
          </div>
          <div class="user-defined-des">
            <p class="user-defined-title">点击或将文件拖拽到这里上传</p>
            <p class="user-defined-limit">支持扩展名：.doc .docx .pdf .jpg</p>
          </div>
        </div>
      </el-upload>
    </div>
    <div class="table-content clearfix">
      <div class="table-header">
        <p class="table-title"><span></span>{{fileName}}</p>
        <div class="fr btn-right">
          <!--<el-upload
            class="upload-demo"
            action="/api/guide/importTarget"
            :limit="3"
            :on-success="importTarget"
            :show-file-list="false">
            <el-button size="small" type="orange">导入</el-button>
          </el-upload>-->
          <el-button size="small" style="margin-left: 10px" @click="exportGuideLineTemplate">模版下载</el-button>
        </div>
      </div>
      <div style="margin-top: 5px" class="tableBox">
        <el-table v-loading="tableLoading" :data="tableData"
                  style="width: 100%" class="tableTh28" border height="61vh" stripe ref="table"
        >
          <el-table-column prop="indexClass" label="指标大类"></el-table-column>
          <el-table-column label="指标名称" width="180">
            <template slot-scope="scope">
              <el-select v-model="scope.row.indexSelect" value-key="indexCode" placeholder="搜索/选择" @change="indexChange(scope.row,scope.$index)">
                <el-option
                  v-for="item in scope.row.indexList"
                  :key="item.indexCode"
                  :label="item.indexName"
                  :value="item">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="weight" :label="year" width="80"></el-table-column>
          <el-table-column label="大于等于">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.moreThan"
                class="input"
                placeholder="请输入"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="小于">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.lessThan"
                class="input"
                placeholder="请输入"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column  label="到达方式" class-name="reachWay">
            <template slot-scope="scope">
              <el-select v-model="scope.row.reachWay" placeholder="请选择">
                <el-option
                  v-for="(item,index) in scope.row.reachWayList"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column  label="目标值">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.targetData"
                class="input"
                placeholder="请输入"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column  label="单位">
            <template slot-scope="scope">
              <el-select v-model="scope.row.indexUnit" placeholder="请选择">
                <el-option
                  v-for="(item,index) in scope.row.indexUnitList"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column  label="操作">
            <template slot-scope="scope">
              <i class="el-icon-plus" v-if="scope.row.operation == 'add' " style="cursor: pointer" @click="addRow(scope.row,scope.$index)"></i>
              <i class="el-icon-minus" v-if="scope.row.operation == 'minus' " style="cursor: pointer" @click="delRow(scope.row,scope.$index)"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="bottom-btn">
      <el-button type="primary" size="small" @click="release">发布</el-button>
      <el-button plain size="small" @click="save">保存并生成</el-button>
    </div>
    <el-dialog :visible.sync="showTable" :title="fileName" width="900px">
      <div class="areaInfo">
        <span>区域名称：{{areaName}}</span>
        <span>区域编码：{{areaId}}</span>
      </div>
      <div style="border-bottom:  1px solid #EBEEF5">
        <el-table v-loading="tableLoading" :data="dialogTableData"
                  style="width: 100%" class="tableTh28" border height="67vh"
        >
          <el-table-column prop="indexCode" label="指标编码"></el-table-column>
          <el-table-column prop="indexName" label="指标名称"></el-table-column>
          <el-table-column prop="moreThan" label="指标值大于等于"></el-table-column>
          <el-table-column prop="lessThan" label="指标值小于等于"></el-table-column>
          <el-table-column prop="reachWay" label="目标值到达方式"></el-table-column>
          <el-table-column prop="targetData" label="目标值"></el-table-column>
          <el-table-column prop="indexUnit" label="单位"></el-table-column>
        </el-table>
      </div>
      <div class="dialogFuJian"  v-if="files && files.length > 0">
        <p>附件</p>
        <div class="list">
          <div v-for="(item,index) in files" :key="index" class="list-item">
            <img v-if="item.attachType == 'DOC' " src="~@/assets/images/common/WORD.png" alt="" width="21">
            <img v-if="item.attachType == 'EXCEL' " src="~@/assets/images/common/excel.png" alt="" width="21">
            <span>{{item.attachName}}</span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="confirmSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {$budgetAPI} from '@/api/';
  import prefixAPI from "../../../api/prefixAPI";
  import {getCookie} from "@/common/js/cookie"
  export default {
    name: "correctGuide",
    components:{
    },
    data(){
      return{
        dialogTitle:"",
        showTable:false,
        tableLoading:false,
        tableData:[],
        files:[],
        year:"",
        areaName:"",
        areaId:"",
        dialogTableData:[],
        fileName:"",
      }
    },
    created(){
      this.updateDetail();
    },
    mounted(){
      let date = new Date();
      this.year = date.getFullYear() + "年";
    },
    methods: {
      //发布
      //optType 操作类型0：保存 1：保存并发布
      release(){
        this.$confirm('是否发布该指引？','提示',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:"warning"
        }).then(()=>{
          let detailStr = [];
          this.tableData.map((item,index)=>{
            let obj = {
              indexCalss1:item.indexCalss1,
              indexCode:item.indexCode,
              indexName:item.indexName,
              weight:item.weight,
              moreThan:item.moreThan,
              lessThan:item.lessThan,
              reachWay:item.reachWay,
              targetData:item.targetData,
              indexUnit:item.indexUnit
            };
            detailStr.push(obj);
          });
          $budgetAPI.updateOrRelease({
            targetId:this.$route.query.targetId,
            fileStr:JSON.stringify(this.files),
            detailStr:JSON.stringify(detailStr),
            guideLineFileName:this.fileName,
            optType:"1"
          },res=>{
            this.alertError(res);
            if(!res.code){
              this.$message({
                type:"success",
                message:"发布成功",
              });
              this.$router.go(-1);
            }
          },err=>{

          })
        }).catch(() =>{
          this.$message({
            type:"info",
            message:"已取消发布"
          })
        })

      },
      //确认保存并生成
      confirmSave(){
        console.log(this.files);
        let detailStr = [];
        this.tableData.map((item,index)=>{
          let obj = {
            indexCalss1:item.indexCalss1,
            indexCode:item.indexCode,
            indexName:item.indexName,
            weight:item.weight,
            moreThan:item.moreThan,
            lessThan:item.lessThan,
            reachWay:item.reachWay,
            targetData:item.targetData,
            indexUnit:item.indexUnit
          };
          detailStr.push(obj);
        });
        $budgetAPI.updateOrRelease({
          targetId:this.$route.query.targetId,
          fileStr:JSON.stringify(this.files),
          detailStr:JSON.stringify(detailStr),
          guideLineFileName:this.fileName,
          optType:"0"
        },res=>{
          this.alertError(res);
          if(!res.code){
            this.showTable = false;
            this.$message({
              type:"success",
              message:"保存成功",
            });
            this.$router.go(-1);
          }

        },err=>{

        })
      },
      //保存并生成
      save(){
        this.showTable = true;
        this.dialogTableData = [];
        this.tableData.map((item,index)=>{
          if(item.indexCode){
            this.dialogTableData.push(item);
          }
        })

      },
      //指引指标数据导入
      importTarget(response,file,fileList){
        this.alertError(response);
        this.tableLoading = true;
        this.tableData = [];
        response.content.data.map((item,index)=>{
          if(item.dataList && item.dataList.length > 0){
            item.dataList.map((dataItem,idx)=>{
              let obj = {
                indexCalss1:dataItem.broadClass,
                indexClass:dataItem.operation == 'add'? dataItem.broadClass : '',
                indexList:item.indexList,
                indexSelect:{
                  indexCode:dataItem.indexCode,
                  indexName:dataItem.indexName,
                },
                indexCode:dataItem.indexCode,
                indexName:dataItem.indexName,
                weight:dataItem.weight,
                moreThan:dataItem.moreThan,
                lessThan:dataItem.lessThan,
                reachWayList:["增长","到达","下降"],
                reachWay:dataItem.reachWay,
                targetData:dataItem.targetData,
                indexUnitList:["%","万元","万户"],
                indexUnit:dataItem.indexUnit,
                operation:dataItem.operation,
              };
              this.tableData.push(obj);
            });
          }else{
            let obj = {
              indexCalss1:item.indexCalss1,
              indexClass:item.indexCalss1,
              indexList:item.indexList,
              indexSelect:{},
              indexCode:"",
              indexName:"",
              weight:"",
              moreThan:"",
              lessThan:"",
              reachWayList:["增长","到达","下降"],
              reachWay:"",
              targetData:"",
              indexUnitList:["%","万元","万户"],
              indexUnit:"",
              operation:"add",
            };
            this.tableData.push(obj);
          }
        });
        this.tableLoading = false;
      },
      //初始化数据
      updateDetail(){
        this.tableLoading = true;
        $budgetAPI.updateDetail({
          targetId: this.$route.query.targetId
        },res=>{
          this.tableLoading = false;
          this.areaName = res.content.areaName;
          this.areaId = res.content.areaId;
          this.fileName = res.content.fileName;
          res.content.files.map((item,index)=>{
            this.$set(item,'name',item.attachName);
            this.files.push(item);
          });
          this.alertError(res);
          res.content.data.map((item,index)=>{
            if(item.dataList && item.dataList.length > 0){
              item.dataList.map((dataItem,idx)=>{
                let obj = {
                  indexCalss1:dataItem.indexCalss1,
                  indexClass:dataItem.operation == 'add'? dataItem.broadClass : '',
                  indexList:item.indexList,
                  indexSelect:{
                    indexCode:dataItem.indexCode,
                    indexName:dataItem.indexName,
                  },
                  indexCode:dataItem.indexCode,
                  indexName:dataItem.indexName,
                  weight:dataItem.weight,
                  moreThan:dataItem.moreThan,
                  lessThan:dataItem.lessThan,
                  reachWayList:["增长","到达","下降"],
                  reachWay:dataItem.reachWay,
                  targetData:dataItem.targetData,
                  indexUnitList:["%","万元","万户"],
                  indexUnit:dataItem.indexUnit,
                  operation:dataItem.operation,
                };
                this.tableData.push(obj);
              });
            }else{
              let obj = {
                indexCalss1:item.indexCalss1,
                indexClass:item.indexCalss1,
                indexList:item.indexList,
                indexSelect:{},
                indexCode:"",
                indexName:"",
                weight:"",
                moreThan:"",
                lessThan:"",
                reachWayList:["增长","到达","下降"],
                reachWay:"",
                targetData:"",
                indexUnitList:["%","万元","万户"],
                indexUnit:"",
                operation:"add",
              };
              this.tableData.push(obj);
            }
          });
          setTimeout(()=>{
            this.$refs.table.doLayout();
          },1000)
          this.tableLoading = false;
        },err=>{

        })
      },
      //导入模版下载
      exportGuideLineTemplate(){
        let token = getCookie("token") ;
        if (process.env.NODE_ENV == 'development') {
          window.location.href = prefixAPI.loc + "/api/guide/exportGuideLineTemplate?token="+token;
        } else if (process.env.NODE_ENV == 'production') {
          window.location.href = prefixAPI.hp + "/api/guide/exportGuideLineTemplate?token="+token;
        }
      },
      //指标名称选择 返回Code和name
      indexChange(row,index) {
        row.indexCode = row.indexSelect.indexCode;
        row.indexName = row.indexSelect.indexName;
        $budgetAPI.childClassByIndex({
          indexCode:row.indexCode
        },res=>{
          this.alertError(res);
          row.weight = res.content;
        },err=>{

        })
      },
      //添加一行
      addRow(row,index){
        //初始化行数据
        let rowData = {
          indexCalss1:"",
          indexClass:"",
          indexList:[],
          indexSelect:{},
          indexCode:"",
          indexName:"",
          weight:"",
          moreThan:"",
          lessThan:"",
          reachWayList:["增长","到达","下降"],
          reachWay:"",
          targetData:"",
          indexUnitList:["%","万元","万户"],
          indexUnit:"",
          operation:"minus",
        };
        rowData.indexCalss1 = row.indexCalss1;
        rowData.indexList = row.indexList;
        this.tableData.splice(index + 1,0,rowData);
      },
      //删除一行
      delRow(row,index){
        this.$confirm('此操作将删除本行数据，是否继续？','提示',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:"warning"
        }).then(()=>{
          this.tableData.splice(index,1);
          this.$message({
            type:"info",
            message:"已删除"
          })
        }).catch(() =>{
          this.$message({
            type:"info",
            message:"已取消删除"
          })
        });

      },
      //删除文件时的钩子
      removeFileList(file, fileList){
        if(fileList.length > 0){
          this.files = [];
          fileList.map((item,index)=>{
            this.files.push(item);
          })
        }else{
          return false
        }
      },
      //文件上传成功时的钩子
      updata(response,file,fileList) {
        let obj = response.content;
        this.$set(obj,'name',obj.attachName);
        this.files.push(obj);
      }
    },

  }
</script>
<style scoped lang="scss">
  .correctGuide{
    .user-defined{
      width: 100%;
      margin: 20px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      .fujian{
        margin-right: 10px ;
        .icon-fujian{
          font-size: 28px;
          color: #418ee9;
        }
      }
      .user-defined-des{
        font-size: 14px;
        .user-defined-title{
          text-align: left;
          color: #222222;
          font-weight: bold;
          height: 20px;
          line-height: 20px;
        }
        .user-defined-limit{
          color: #555555;
          height: 20px;
          line-height: 20px;
        }
      }
    }
    .table-content{
      margin-top: 10px;
      .table-header{
        display: flex;
        justify-content: space-between;
        .btn-right{
          display: flex;
        }
        .table-title{
          font-size: 14px;
          font-weight: bold;
          height: 30px;
          line-height: 30px;
          span{
            display: inline-block;
            width: 5px;
            height: 5px;
            background-color: #418ee9;
            border-radius: 1000%;
            overflow: hidden;
            margin-right: 10px;
            margin-bottom: 3px;
          }
        }
      }
    }
    .bottom-btn{
      margin-top: 15px;
      display: flex;
      flex-direction: row-reverse;
      .el-button{
        margin-right: 10px;
      }
    }
    .areaInfo {
      span {
        display: inline-block;
        margin-right: 15px;
        height: 30px;
        line-height: 30px;

      }
    }
    .dialogFuJian{
      margin-top: 30px;
      .list{
        border: 1px solid #e6e6e6;
        padding: 21px 15px;
        display: flex;
        flex-wrap:wrap;
        .list-item{
          width: 30%;
          margin-right: 20px;
          cursor: pointer;
          img{
            vertical-align: middle;
          }
          span{
            display: inline-block;
            height: 25px;
            line-height: 25px;
          }
        }
      }
    }
  }

</style>

<style lang="scss">
  .correctGuide{
    .el-dialog__footer{
      display: flex;
      justify-content: center;
    }
    .el-dialog__body{
      padding: 10px 20px;
    }
    .el-upload{
      width: 100%;
      .el-upload-dragger{
        width: 100%;
        height:90px;
      }
    }
    .el-upload-list__item{
      width: 30%;
      margin-top:10px;
      float: left;
    }

    .el-table td, .el-table th{
      padding: 5px 0;
    }

    /*.reachWay .el-select-dropdown__item{*/
    /*  width: 100px !important;*/
    /*}*/
  }


</style>
